<template>
	<view class="container">
		<cu-header bgColor="bg-gradual-blue" :isBack="true"><block slot="content" class="page-name">ColorUI-Plus</block></cu-header>
		<single v-if="PageCur=='basics'"></single>
		<group v-if="PageCur=='component'"></group>
		<home v-if="PageCur=='plugin'"></home>
		<view style="height: 100rpx;"></view>
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="basics">
				<view class='cuIcon-cu-image'>
					<image :src="'../../static/icon_home' + [PageCur == 'basics'?'':'_no'] + '.png'"></image>
				</view>
				<view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
			</view>
			<view class="action" @click="NavChange" data-cur="component">
				<view class='cuIcon-cu-image'>
					<image :src="'../../static/icon_live' + [PageCur == 'component'?'':'_gray'] + '.png'"></image>
				</view>
				<view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
			</view>
			<view class="action" @click="NavChange" data-cur="plugin">
				<view class='cuIcon-cu-image'>
					<image :src="'../../static/icon_user' + [PageCur == 'plugin'?'':'_no'] + '.png'"></image>
				</view>
				<view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
			</view>
		</view>
	</view>
</template>

<script>
	import single from '@/components/tabars/single.vue';
	import group from '@/components/tabars/group.vue';
	import home from '@/components/tabars/home.vue';
	export default {
		components: {
			single,
			group,
			home
		},
		data() {
			return {
				PageCur: 'basics'
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

<style scoped>
	
</style>
